<template id="rankListComponent">
    <div class="pas1-active-sort">
        <!--活动排行-->
        <div class="pas1-active-content" v-if="afterMounted">
            <img class="pas1-title-img" v-if="pageObjDefault.headerImg" v-lazy="staticImageUrl(pageObjDefault.headerImg)" alt=""/>
            <img class="pas1-title-img" v-else v-lazy="staticImageUrl('images/prize_active_resort1.png')" alt=""/>
            <!--没有活动排行的时候-->
            <div class="wempty-list" v-if="Object.keys(pageObjDefault.orders).length == 0">
                <div>
                    <img class="pas1-title-img" v-if="pageObjDefault.noRankimgImg" v-lazy="staticImageUrl(pageObjDefault.noRankimgImg)" alt=""/>
                    <img class="empty-list-img" v-else v-lazy="staticImageUrl('images/no_sort.png')" alt=""/>
                    <p class="empty-list-text">{{pageObjDefault.noRankimgText}}</p>
                </div>
            </div>
            <ul class="pas1-list" v-else>
                <template v-if="pageObjDefault.rankingMessage.length > 0" >
                    <li class="pas1-wdecrition" v-for="RankingMsg in pageObjDefault.rankingMessage"
                        style="margin-bottom: 0.1rem">
                        <span class="pas1-decrition">
                            <span>{{RankingMsg.from}}-{{RankingMsg.to}}名拆完所有红包可再享受{{RankingMsg.rewardValue}}元优惠</span>
                            <span class='pas1-under-line'></span>
                        </span>
                    </li>
                </template>
                <li class="pas1-wdecrition" v-if="pageObjDefault.rankingMessage.length == 0" style="margin-bottom: 0.1rem">
                    <span class="pas1-decrition">
                        <span>暂无排名优惠</span>
                        <span class='pas1-under-line'></span>
                    </span>
                </li>
                <li class="pas1-item" v-for="(order,index) in orders" v-if="index < 3" :key="index"
                    :class="{'pas1-myself-item': order.judgeMeExistRankList}">
                    <div class="pas1-bg-purple pas1-user-msg">
                        <span class="pas1-sort" v-if="order.judgeMeExistRankList">我</span>
                        <span class="pas1-sort" v-else-if="index == 0"> <img class='pas1-sort-img'
                                                                             v-lazy="staticImageUrl('images/prize_no1.png')"/></span>
                        <span class="pas1-sort" v-else-if="index == 1"> <img class='pas1-sort-img'
                                                                             v-lazy="staticImageUrl('images/prize_no2.png')"/></span>
                        <span class="pas1-sort" v-else-if="index == 2"> <img class='pas1-sort-img'
                                                                             v-lazy="staticImageUrl('images/prize_no3.png')"/></span>
                        <img if="order.ownerIcon" class="pas1-userheader" :src="order.ownerIcon" />
                        <span class='pas1-username'
                              v-if="!order.judgeMeExistRankList">{{order.ownerName | nameFilter}}</span>
                        <span class='pas1-username' v-if="order.judgeMeExistRankList">{{order.ownerName }}</span>
                    </div>
                    <p class="grid-content pas1-bg-purple-light pas1-user-msg">
                        {{order.finishTime | timeFilter}}{{order.finishText}}
                    </p>
                </li>
                <li class="pas1-item pas1-myself-item" v-if="myInfo.isBuyed">
                    <div class="pas1-bg-purple pas1-user-msg">
                        <span class="pas1-sort">我</span>
                        <img class="pas1-userheader" :src="myInfo.icon" />
                        <span class='pas1-username'>{{myInfo.name}}</span>
                    </div>
                    <div class="grid-content pas1-bg-purple-light pas1-user-msg">
                        还没买呢
                    </div>
                </li>
                <li class="pas1-more" v-show="openAllShow" @click="showMoreRanking()">
                    展开全部排名<span class='triangle pd-right-triangle'></span>
                </li>
            </ul>
        </div>
        <!--v-if="rankingShow"-->
        <!--<act-ranking-popup-->
                            <!--v-if="rankingShow"-->
                            <!--v-bind:act-Info = "actInfo"-->
                            <!--v-on:closeSort="rankingShow = false">-->
        <!--</act-ranking-popup>-->
    </div>
</template>
<script>
    import $ from 'jquery'
    import xurl from '../../../../../x/xurl'
    import {formatDate} from '../../../../../../static/js/common'
    // import actRankingPopupComponent from './actRankingAlert.vue'

    export default {
        name: 'rankListComponent',
        props: {
            'actInfo':{
                type:Object
            },
            pageObj:{
                type:Object,
            },
            myInfo:{
                type:Object
            }
        },
        data() {
            return {
                pageObjDefault:{
                    headerImg:'',
                    noRankimgImg:'',
                    noRankimgText:'暂无排名',
                    orders:[],//{judgeMeExistRankList:false//是否为自己,ownerName:''//用户名，finishTime:购买完成时间}
                    rankingMessage:[],
                    finishText:'购买成功'
                },
                afterMounted:false,
                defaultMyInfo: {},//{isBuyed:false//自己是否买过,icon:''//头像,name:''//名字}
                defaultActInfo: {},
                curPage: 0,//页面
                totalPage: 0,//总页
                rankingShow: false,
                openAllShow: false,
                // rankingMessage: [],
                // rankingMessageF: false
            }
        },
        mounted: function () {
            this.pageObjDefault = Object.assign(this.pageObjDefault,this.pageObj);
            this.afterMounted =true;
        },
        filters: {
            nameFilter: function (name) {
                if (name.length < 3) {
                    return name;
                }
                return name.substr(0, 3).concat("**");
            },
            timeFilter: function (time) {
                let date = new Date(time);
                return formatDate(date, "dd日hh:mm");
            }
        },
        methods: {
        },
        components: {
            // 'act-ranking-popup': actRankingPopupComponent
        }
    }

</script>
<style lang="scss" scoped>
    @import url($css_root + 'css/components/activeSort1.css');
</style>
